<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mapbox叠加geowebcache发布的arcgis3857坐标</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/mapbox-gl.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/1.9.1/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>

    let wmtsSource = {
        'type': 'raster',
        'tiles': [
            'http://192.168.1.90:18080/geowebcache/service/wms?LAYERS=haianblue&FORMAT=image%2Fpng&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&STYLES=&EXCEPTIONS=application%2Fvnd.ogc.se_inimage&SRS=EPSG%3A3857&BBOX={bbox-epsg-3857}&WIDTH=256&HEIGHT=256'
        ],
        'tileSize': 256
    };
    mapboxgl.accessToken = 'pk.eyJ1IjoiYWRtaW4tbHVjYXMiLCJhIjoiY2xrcm5jcDFnMGJvMjNmbjNrdWh1dDQ3biJ9.gW0WN4QSSl1EZPmgrhUc0Q';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: {
            //设置版本号，一定要设置
            "version": 8,
            //添加来源
            "sources": {
                "wmtsSource": wmtsSource
            },
            "layers": [
                {
                    //图层id，要保证唯一性
                    "id": "wmtsLayer",
                    //图层类型
                    "type": "raster",
                    //数据源
                    "source": "wmtsSource",
                    "paint": {
                        "raster-opacity": 0.8
                    },
                    //图层最小缩放级数
                    "minzoom": 0,
                    //图层最大缩放级数
                    "maxzoom": 18
                }
            ]
        },
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        center: [120.46292388403401, 32.53487644346701],
        zoom: 15,
        maxZoom: 16,// 设置最大缩放层级为14
        pitch: 70,
        bearing: 0
    });

    map.on('load', function () {



        map.addSource("mapillary", {
            "type": "vector",
            // 'scheme':'tms',
            "tiles": [
                'http://192.168.1.90:8088/haian/pbf/{z}/{x}/{y}.pbf'
            ],
            "minzoom": 1,
            "maxzoom": 17
        })
        map.addLayer(
            {
                "id": "mapillary", // Layer ID
                "type": "fill-extrusion",
                "source": "mapillary", // ID of the tile source created above
                "source-layer": "builds",
                "paint": {
                    "fill-extrusion-color": "#329aef",
                    "fill-extrusion-height": ["get", "FLOOR"],
                    "fill-extrusion-base": 0,
                    "fill-extrusion-opacity": 1
                }
            }
        )

    });

</script>

</body>
</html>
